<template>
  <div class="container">
    <!-- 搜索盒子 -->
    <div class="search-box" style="background-color: #ffffff;">
      <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
      <input class="search-input" confirm-type="search" v-model="inputValue" placeholder="搜索客户名称"
        placeholder-style="color: #9EA1BB;letter-spacing:2rpx;" @input="inputEnter" />
    </div>
    <!--客户列表 -->
    <div class="companylistbox">
      <div class="companylistboxitem" v-for="(i, j) in data" :key="j">
        <div class="top">{{ i.companyName }}</div>
        <div class="bottom"><span>注册时间:</span><span>{{ i.createTime.slice(0, 10) }}</span></div>
      </div>
    </div>
    <div class="flex">
      <div></div>
      <div style="color: #3D3D3D;font-size: 24rpx;">当前展示客户数<span style="margin-left: 26rpx;">{{ data.length
      }}/</span><span>{{ totalCount
}}+</span></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getqueryallcompanyaapi } from '@/api/quick'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import user from '@/utils/user'
import { ref } from 'vue'
import { shake } from '@/utils/util'

onLoad(async () => {
    await user.waitLogin()
    getqueryallcompanya()
})
const pageNum = ref(1)

const getqueryallcompanya = () => {
    getqueryallcompanyaapi({
        pageSize: 5,
        pageNum: 1,
        companyName: inputValue.value
    }).then((res: any) => {
        console.log(res, '客户池')
        totalCount.value = res.total
        data.value = res.rows
    })
}
// 到达底部
// const hasNextPage = ref(true)
// onReachBottom(() => {
//     if (hasNextPage.value) {
//         pageNum.value += 1
//     }
// })

// 我的客户接口
const data = ref<any>([])
const totalCount = ref(0)

// input框输入事件
const inputValue = ref('')
const inputEnter = (e: any) => {
    console.log(inputValue.value)

    shake(
        getqueryallcompanya
        , 300)
}
</script>
<style lang="scss" scoped>
.flex {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.companylistbox {
  padding-top: 30rpx;
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;

  .companylistboxitem {
    padding: 30rpx 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    border-bottom: 1px solid #F4F4F7;

    .top {
      color: #202536;
      font-size: 32rpx;
      font-weight: 700;
    }

    .bottom {
      margin-top: 24rpx;
      font-size: 24rpx;
      color: #565868;
    }
  }
}

.container {
  background: #ffffff;
  padding: 0 30rpx;
  box-sizing: border-box;
  height: 100%;
}

.search-input {
  background: #FAFAFC;
}

.manipulate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32rpx;

  .complete {
    font-size: $font-normal;
    font-weight: 400;
    color: $grey;
  }

  .total {
    display: flex;
    align-items: center;

    .merchandise {
      @include flex-between;
      font-size: $font-normal;
      font-weight: 400;
      color: #565868;
      margin-right: 35rpx;
    }

    .compositer {
      @include flex-between;
      font-size: $font-normal;
      font-weight: 400;
      color: #565868;
    }
  }

  .merchandis-resource {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
  }

  .compositer-resource {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
  }
}

.substance {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 30rpx;

  .corporation {
    padding-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #202536;
  }

  .autograph {
    display: flex;
    align-items: center;
    color: $grey;
    font-size: $font-normal;
    border-top: 1px solid #f4f4f7;
    padding: 24rpx 0 16rpx 0;

    .remark {
      padding: 8rpx 16rpx 11rpx 16rpx;
      background: #f4f4f7;
      margin-right: 16rpx;
      font-size: $font-base;
      color: #565868;
      border-radius: 4rpx;
    }
  }

  .staff {
    display: flex;
    align-items: center;
    font-size: $font-normal;
    font-weight: 400;
    color: #9497b1;

    .staff-quantity {
      color: $black;
    }
  }
}
</style>
